<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex flex-wrap align-center justify-between benben-position-layout flex shopping_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center shopping_fd0_0'>
        </view>
        <text class='shopping_fd0_1'>{{$t('购物车')}}</text>
        <view class='flex flex-direction-row-reverse flex-wrap align-center shopping_fd0_0'
          :style="{'margin-right':`${ appSystemIdentification == 'Wechat' ?  '30%':''}`}">
          <!--        <text class='shopping_fd0_2_c0' v-if="is_edit===false" @tap.stop="editTabFunc()">{{$t('管理')}}</text><text
            class='shopping_fd0_2_c0_1' v-if="is_edit===true" @tap.stop="editTabFunc()">{{$t('完成')}}</text> -->
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <view class="flex justify-between manage-box">
        <view class="flex manange-left">
          <view class="manange-boxs" :class="typeId==i.aid ? 'active' : ''" v-for="(i,j) in typeList"
            @click.stop="chooseMange(i)" :key="i">{{i.name}}</view>
        </view>
        <!--editTabFunc deleteCartsFunc  -->
        <view class='flex flex-direction-row-reverse flex-wrap align-center shopping_fd0_0' v-if="dataList.length"
          :style="{'margin-right':`${ appSystemIdentification == 'Wechat' ?  '30%':''}`}">
          <text class='shopping_fd0_2_c0' v-if="is_edit===false" @tap.stop="editTabFunc()">{{$t('管理')}}</text><text
            class='shopping_fd0_2_c0_1' v-if="is_edit===true" @tap.stop="editTabFunc()">{{$t('完成')}}</text>
        </view>
      </view>
      <view class="container">
        <view class="bg-white conatiner-item" v-for="(item,index) in dataList" :key="index">
          <view class="flex align-center top-box" @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/sy/shopdetail/shopdetail?usermerchant_aid=${item.id}`">
            <view class="img-box" @click.stop="chooseShop(item,item.trollVos)">
              <!-- 3 -->
              <image v-if="!item.isShow" :src='STATIC_URL+"229.png"' mode=""></image>
              <image v-else :src='STATIC_URL+"3.png"' mode=""></image>
            </view>
            <image class="shopIcon" :src='STATIC_URL+"514.png"' mode="aspectFill"></image>
            <view class="text-333 text-lg">{{item.shopName}}</view>
            <image class="shopIcon-r" :src='STATIC_URL+"126.png"' mode=""></image>
          </view>
          <view class="flex items" v-for="(itemC,indexC) in item.trollVos" :key="indexC">
            <view class="flex align-center items-theunm">
              <view class="img-box" @click.stop="choosegoods(item,itemC)">
                <!-- 3 -->
                <image v-if="!itemC.isShow" :src='STATIC_URL+"229.png"' mode=""></image>
                <image v-else :src='STATIC_URL+"3.png"' mode=""></image>
              </view>
              <image class="margin-left-sm shopIcon-shop" :src='itemC.coverPic' mode="aspectFill"></image>
            </view>
            <view class="items-box">
              <view class="text-df text-333 text-weight-600 text-cut">{{itemC.comdName}}</view>
              <view class="flex text-999 text-xs justify-between guige">
                <view>{{itemC.comPropItemNames}}</view>
                <!-- <view class="flex align-center">选规格<image :src='STATIC_URL+"478.png"' mode="aspectFill" class="icon-r">
                  </image>
                </view> -->
              </view>
              <view class="flex justify-between align-center">
                <!-- 购买 -->
                <view v-if="typeId==1" class="flex align-end text-df text-red"><text
                    class=" text-sm">￥</text>{{itemC.sellPrice}}</view>
                <!-- 租赁 -->
                <view v-if="typeId==2" class="  text-df text-red">
                  <view class="flex align-end">
                    <image :src='STATIC_URL+"500.png"' mode="aspectFill" class="margin-right-xs icon-zu">
                    </image>
                    <text class=" text-sm">￥</text>{{itemC.rentPrice}}
                  </view>
                  <view class="text-xs margin-top-xs flex align-end text-333">
                    押金￥{{itemC.valueAmount}}
                  </view>
                </view>
                <uni-number-box class="number" :min="1" :max="100" :value="itemC.secQuantNum"
                  @change="numberChange($event, i, index)"></uni-number-box>

              </view>
            </view>
          </view>
          <view class="flex justify-end margin-top-sm align-center bottom-btn">
            <view class="flex align-end text-df text-red"><text class="text-666 text-sm">合计:</text>￥{{item.sumMoney}}
            </view>
            <view class="text-white text-lg bns" @click.stop="submitbuy(item.chooseArr)">结算({{item.chooseArr.length}})
            </view>
          </view>
        </view>
        <!-- <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
          :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty> -->
        <fu-empty-ui v-if="dataList.length==0"></fu-empty-ui>
      </view>
      <!-- <benben-multiquotient-cart type='tiling' :show-shop='false' class='shopping_flex_cart_1' :is-editor.sync='is_edit'
        :cart-list.sync='dataList' :cart-ids.sync='cart_ids' :cart-id.sync='cart_id' :goods-id.sync='goods_id'
        :sku-id.sync='sku_name_sku' :cart-num.sync='num' @toGoods="goToGoodsDetailFunc()"
        @transCartGoods="addCollectFunc()" @delCart="deleteCartsFunc()" @createOrder="ConfirmOrderFunc()"
        @numberChange="editCartNumFunc()" @changeSku="editSkuFunc()">
        <template #login>
          <view class='flex flex-direction flex-wrap align-center shopping_shopCart0_0'>
            <image class='shopping_shopCart0_0_c0' mode="aspectFit" :src='STATIC_URL+"492.png"'></image>
            <text class='shopping_shopCart0_0_c1'>{{$t('您的还没登录，快去登录吧')}}</text>
            <button class='shopping_shopCart0_0_c2' @tap.stop="toLoginDiy()">{{$t('去登录')}}</button>
          </view>
        </template><template #empty>
          <view class='flex flex-direction flex-wrap align-center shopping_shopCart0_0'>
            <image class='shopping_shopCart0_0_c0' mode="aspectFit" :src='STATIC_URL+"492.png"'></image>
            <text class='shopping_shopCart0_0_c1'>{{$t('您的购物车还没有商品，快去挑选吧')}}</text>
            <button class='shopping_shopCart0_0_c2' @tap.stop="toLoginDiy()">{{$t('去挑选好货')}}</button>
          </view>
        </template>
      </benben-multiquotient-cart> -->

      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
      </view>


      <benben-specs-popup ref="specsPopup1679904664383" class='shopping_flex_specs_3' :speclist='dataDetail.spec_list'
        :skulist='dataDetail.sku_list' :sku-id.sync='sku_name_sku' :sku-name.sync='shopsku_id'
        :price.sync='dataDetail.shop_price' :thumb.sync='dataDetail.thumb' :stock.sync='dataDetail.stock'
        :number.sync='num' @confirm="confirmSelectionFunc()">
      </benben-specs-popup>
      <!---flex布局flex布局开始-->
      <view class="flex justify-between align-center align-stretch benben-flex-layout shopping_flex_4" v-if="is_edit">
        <view class='flex flex-wrap align-center shopping_fd4_0'>
          <view class="img-box" @click="chooseIsAll">
            <!-- 3 -->
            <image v-if="!isAll" :src='STATIC_URL+"229.png"' mode=""></image>
            <image v-else :src='STATIC_URL+"3.png"' mode=""></image>
          </view>
          <view class="text-333 text-df margin-left-sm">全选</view>
        </view>
        <view class="flex justify-between btns">
          <view class="btnsone text-333 text-df" @click.stop="deleteCartsFunc">删除</view>
          <view class="btnsone text-333 text-df" @click.stop="addShopOrCommdColl">移入收藏夹</view>
        </view>
      </view>

      <!---flex布局flex布局结束-->


    </view>
  </view>
</template>
<script>
  import pagingList from '@/common/mixin/paging_list.js';
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},
    mixins: [pagingList],

    data() {
      return {
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        "dataList": [],
        "is_edit": false,
        "cart_ids": "",
        "goods_id": "",
        "store_aid": "",
        "sku_name": "",
        "num": "",
        "cart_id": "",
        "clickSkuAction": "",
        "sku_name_sku": "",
        "buy_num": "",
        "goodsDetails": [],
        "dataDetail": {
          "id": "",
          "cid": "",
          "adslogan": "",
          "name": "",
          "sales_sum": "",
          "spectypeid": "",
          "click": "",
          "is_recommend": "",
          "is_new": "",
          "is_hot": "",
          "shop_price": "",
          "member_price": "",
          "market_price": "",
          "images": [],
          "thumb": "",
          "body": "",
          "description": "",
          "stock": "",
          "is_spec": "",
          "is_shipping": "",
          "freight_price": "",
          "support_self_mention": "",
          "freight_template_id": "",
          "partner_id": "",
          "video": "",
          "video_img": "",
          "share_award_money": "",
          "discounts": "",
          "spec_list": [],
          "sku_list": {
            "sku_id": "",
            "key": "",
            "key_name": "",
            "member_price": "",
            "shop_price": "",
            "market_price": "",
            "stock": ""
          },
          "coupon_list": [],
          "activity_info": {
            "activity_type": ""
          },
          "user_level": "",
          "is_collect": "",
          "comment_total": "",
          "praise_rate": "",
          "freight_explain": "",
          "freight_name": "",
          "sale_top_name": "",
          "question_total": "",
          "question_list": [],
          "goods_type": "",
          "chat_price": "",
          "shop_info": {
            "store_id": "",
            "store_name": "",
            "store_logo": "",
            "level_name": "",
            "store_star": "",
            "store_collection_num": ""
          },
          "warm_prompt": "",
          "comment": []
        },
        "shopsku_id": "",
        "shopsku_name": "",
        "shopnum": 0,
        "tabs": "1",
        "dataGoodsList": [],
        "index": 0,
        "navCentral": [],
        "rightAdvertisement": [],
        "leftAdvertisement": [],
        "groupingShop": [],
        "subadvertisement": [],
        "messageNum": {
          "article": "",
          "message": "",
          "chat": "",
          "all": ""
        },
        "cid": "0",
        "tjStatus": "3",
        "goods_type": "",
        typeList: [{
          aid: 2,
          name: '租赁'
        }, {
          aid: 1,
          name: '购买'
        }],
        typeId: 2,
        "tjStatusType": [{
          "name": "猜你喜欢",
          "value": "3",
          "image": ""
        }, {
          "name": "首发新品",
          "value": "4",
          "image": ""
        }, {
          "name": "热门推荐",
          "value": "2",
          "image": ""
        }],
        isAll: false,
        dataAll: [],
        address_id: ''
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },
      userInfo: {
        get() {
          return this.$store.state.userInfo
        },
        set() {
          this.$store.commit('updateUserInfo', value)
        },
      },
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      },
      /**
       * @returns
       * Android       安卓
       * IOS       苹果
       * Web       H5 或 pc
       * Wechat       微信小程序
       * Alipay       支付宝小程序
       * Baidu       百度小程序
       * ByteBounce       抖音小程序
       * 360       360小程序
       * FastApp       快应用
       */
      appSystemIdentification() {
        return this.$store.state.appSystemIdentification
      }
    },
    watch: {},
    onLoad(options) {
      if (this.isLogin) {
        this.getCarListFunc()
      }
      this.$api.get(global.apiUrls.qryUserAdress, {

      }).then(res => {
        if (res.data.code == 0) {
          if (res.data.data.records.length) {
            this.address_id = res.data.data.records[0].id
          }


        }
      })
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      // 去支付
      submitbuy(item) {
        console.log('shopIdk', item)
        let shopIdk = item[0].shopIdk
        let dtos = item.map(chider => {
          const obj = {
            id: chider.id,
            secQuantNum: chider.secQuantNum
          }
          return obj
        })
        let recType = 1
        if (this.typeId == 1) {
          recType = 1
        } else {
          recType = 20
        }
        uni.navigateTo({
          url: `/pages/sy/checkSeckill/checkSeckill?shopIdk=${shopIdk}&dtos=${JSON.stringify(dtos)}&recType=${recType}&selectNum=${this.typeId}&into=cart&address_id=${this.address_id}`
        })
        console.log('chooseArr', shopIdk, dtos)
      },
      chooseShop(item, itemC) {
        item.isShow = !item.isShow
        for (var i = 0; i < itemC.length; i++) {
          itemC[i].isShow = item.isShow
        }
        if (item.isShow) {
          this.dataAll.push(item)
        } else {
          this.dataAll.splice(0, 1)
          console.log(this.dataAll.length)
        }
        if (this.dataAll.length == this.dataList.length) {
          this.isAll = true
        } else {
          this.isAll = false
        }
        item.chooseArr = itemC.filter(itemi => itemi.isShow)
        if (this.typeId == 1) {
          item.sumMoney = item.chooseArr.map(itemA => {
            return itemA.sellPrice * itemA.secQuantNum
          }).reduce((pre, cur) => {
            return item.sumMoney = pre + cur
          })
        } else {
          item.sumMoney = item.chooseArr.map(itemA => {
            return itemA.rentPrice * itemA.secQuantNum
          }).reduce((pre, cur) => {
            return item.sumMoney = pre + cur
          })
        }

      },
      choosegoods(item, itemC) {
        itemC.isShow = !itemC.isShow
        item.sumMoney = 0
        item.chooseArr = item.trollVos.filter(itemi => itemi.isShow)
        if (this.typeId == 1) {
          item.sumMoney = item.chooseArr.map(itemA => {
            return itemA.sellPrice * itemA.secQuantNum
          }).reduce((pre, cur) => {
            return item.sumMoney = pre + cur
          })
        } else {
          item.sumMoney = item.chooseArr.map(itemA => {
            return itemA.rentPrice * itemA.secQuantNum
          }).reduce((pre, cur) => {
            return item.sumMoney = pre + cur
          })
        }

        console.log('item.chooseArr.length', item.chooseArr.length)
        if (item.chooseArr.length == item.trollVos.length) {
          item.isShow = true
          this.dataAll.push(item)
        } else {
          item.isShow = false
          this.dataAll.splice(0, 1)
        }
        if (this.dataAll.length == this.dataList.length) {
          this.isAll = true
        } else {
          this.isAll = false
        }
      },
      chooseIsAll() {
        this.isAll = !this.isAll
        for (var i = 0; i < this.dataList.length; i++) {
          this.dataList[i].isShow = this.isAll
          for (var j = 0; j < this.dataList[i].trollVos.length; j++) {
            this.dataList[i].trollVos[j].isShow = this.isAll
          }
        }
      },
      numberChange() {},
      chooseMange(item) {
        console.log('itetm', item)
        this.typeId = item.aid
        this.getCarListFunc()
      },
      //获取购物车列表
      async getCarListFunc() {
        if (this.isLogin) {
          console.log('getCarListFunc')
          //请求方法
          //数据验证
          this.minixPagingListsApi = global.apiUrls.qryComdTrollBuy;
          this.pageingListApiMethod = 'get';
          this.allowOnloadGetList = false;
          this.pagingListPostDataContent = {
            selectNum: this.typeId
          }
          this.listData = [];
          this.dataList = this.listData;
          this.pagingListToggle();
        }
      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      },
      //移入收藏夹
      async addCollectFunc() {
        //请求方法
        //数据验证

        let data62c0087912574 = await this.$api.post(global.apiUrls.post62c0087912574, {
          cart_ids: this.cart_ids
        });

        if (data62c0087912574.data.code != 0) {
          this.$message.info(data62c0087912574.data.msg);
          return
        }
        this.getCarListFunc()
      },
      //是否编辑
      editTabFunc() {
        if (this.is_edit === true) {
          this.is_edit = false;
        } else {
          this.is_edit = true;
        }
      },
      // 移入 移除收藏
      async addShopOrCommdColl() {
        let comdIdk = []
        let shopIdk = []
        // console.log(this.dataAll)
        for (var i = 0; i < this.dataList.length; i++) {
          if (this.dataList[i].isShow) {
            shopIdk.push(
              this.dataList[i].id
            )
          }
          for (var j = 0; j < this.dataList[i].trollVos.length; j++) {

            if (this.dataList[i].trollVos[j].isShow) {

              comdIdk.push(
                this.dataList[i].trollVos[j].id
              )
            }
          }
        }
        if (comdIdk.length == 0 || shopIdk.length == 0) {
          this.$message.info('请选择')
          return;
        }

        let data62beb3fca0209 = await this.$api.post(global.apiUrls.addShopOrCommdColl, {
          comdIdk: comdIdk,
          shopIdk: shopIdk
        });
        if (data62beb3fca0209.data.code != 0) {
          this.$message.info(data62beb3fca0209.data.msg);
          return
        }
        console.log('pppppp')
        this.getCarListFunc()
      },
      //删除购物车
      async deleteCartsFunc() {
        let ids = []
        // console.log(this.dataAll)
        for (var i = 0; i < this.dataList.length; i++) {
          for (var j = 0; j < this.dataList[i].trollVos.length; j++) {

            if (this.dataList[i].trollVos[j].isShow) {
              console.log('8985', this.dataList[i].trollVos[j].id)
              ids.push(
                this.dataList[i].trollVos[j].id
              )
            }
          }
        }
        if (ids.length == 0) {
          this.$message.info('请选择商品')
          return;
        }
        let data62beb3fca0209 = await this.$api.post(global.apiUrls.detComdTrolls, {
          ids: ids
        });
        if (data62beb3fca0209.data.code != 0) {
          this.$message.info(data62beb3fca0209.data.msg);
          return
        }
        this.getCarListFunc()
      },

      //修改购物车数量
      async editCartNumFunc() {
        //请求方法
        //数据验证

        let data64144ab8dc6c6 = await this.$api.post(global.apiUrls.post64144ab8dc6c6, {
          cart_id: this.cart_id,
          num: this.num
        });

        if (data64144ab8dc6c6.data.code != 0) {
          this.$message.info(data64144ab8dc6c6.data.msg);
          return
        }



      },
      //确认选择规格
      async confirmSelectionFunc() {
        //请求方法
        //数据验证

        let data641312cc712d2 = await this.$api.post(global.apiUrls.post641312cc712d2, {
          cart_id: this.cart_id,
          sku_id: this.sku_name_sku,
          sku_name: this.shopsku_id,
          shop_price: this.dataDetail.shop_price,
          num: this.num
        });

        if (data641312cc712d2.data.code != 0) {
          this.$message.info(data641312cc712d2.data.msg);
          return
        }



        this.getCarListFunc()
        this.$refs.specsPopup1679904664383.close();
      },
      //获取商品详情多规格
      async editSkuFunc() {
        //请求方法
        //数据验证

        let datadataDetail = await this.$api.get(global.apiUrls.post641987361d887, {
          goods_id: this.goods_id
        });

        if (datadataDetail.data.code != 0) {
          this.$message.info(datadataDetail.data.msg);
          return
        }
        let infodataDetail = datadataDetail.data;
        this.dataDetail = infodataDetail.data

        this.$refs.specsPopup1679904664383.open('confirm');
      },
      //点击店铺
      clickStoreFunc() {

      },
      //点击跳转商品详情
      goToGoodsDetailFunc() {
        this.$urouter.navigateTo(`/pages/fl/shopDetail/shopDetail?id=${this.goods_id}&goods_id=${this.goods_id}`);
      },
      //跳转确认订单
      ConfirmOrderFunc() {
        this.$urouter.navigateTo(`/pages/ddgl/directOrder/directOrder?cartid=${this.cart_ids}`);
      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      }
    }
  };
</script>
<style lang="scss" scoped>
  .img-box {
    width: 36rpx;
    height: 36rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .icon-zu {
    width: 32rpx;
    height: 32rpx;
  }

  .container {
    .conatiner-item {
      padding: 24rpx;
      border-radius: 16rpx;
      width: 710rpx;
      margin: 20rpx auto 24rpx auto;

      .items {
        border-bottom: 2rpx solid #EEEEEE;
        padding: 32rpx 0;

        .items-theunm {
          .shopIcon-shop {
            width: 180rpx;
            height: 180rpx;
            border-radius: 8rpx;
          }
        }

        .items-box {
          margin: 0 0 0 24rpx;
          width: 406rpx;

          .guige {
            margin: 24rpx 0 24rpx 0;
            line-height: 48rpx;
            padding: 0 8rpx;
            height: 48rpx;
            background: #F6F6F6;
            border-radius: 8rpx;

            .icon-r {
              width: 21rpx;
              height: 12rpx;
              margin-left: 10rpx;
            }
          }
        }
      }



      .bottom-btn {
        width: 100%;

        .bns {
          width: 181rpx;
          height: 76rpx;
          background: linear-gradient(132deg, #6CA4FF 0%, #327FFB 100%);
          border-radius: 70rpx;
          line-height: 76rpx;
          text-align: center;
          margin-left: 24rpx;
        }
      }

      .top-box {
        .shopIcon-r {
          width: 12rpx;
          height: 24rpx;
          margin-left: 24rpx;
          transform: translateY(90deg);
        }

        .shopIcon {
          width: 30rpx;
          height: 28rpx;
          margin: 0 10rpx
        }


      }
    }
  }

  .manage-box {
    padding: 24rpx 0;

    .mange-right {
      width: 147rpx;
      height: 65rpx;
      line-height: 65rpx;
      text-align: center;
    }

    .manange-left {

      .manange-boxs {
        width: 147rpx;
        height: 65rpx;
        background: #FFFFFF;
        border-radius: 66rpx;
        color: #777777;
        line-height: 65rpx;
        text-align: center;
        margin-left: 40rpx;

        &.active {
          background: linear-gradient(134deg, #6CA4FF 0%, #327FFB 100%);
          color: #FFFFFF;
        }
      }

    }
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #F8F8F8;
    background-size: 100% auto;
  }

  .shopping_flex_0 {
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .shopping_fd0_2_c0_1 {
    color: #327FFB;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 50rpx;
    margin: 0rpx 32rpx 0rpx 0rpx;
  }

  .shopping_fd0_2_c0 {
    color: var(--benbenFontColor4);
    font-size: 32rpx;
    font-weight: 500;
    line-height: 50rpx;
    margin: 0rpx 32rpx 0rpx 0rpx;
  }

  .shopping_fd0_1 {
    color: var(--benbenFontColor0);
    font-size: 36rpx;
    font-weight: 500;
    line-height: 50rpx;
  }

  .shopping_fd0_0 {
    width: 100rpx;
    // padding: 24rpx 0;
  }

  .shopping_shopCart0_0_c2 {
    background: var(--benbenbgColor7);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    width: 400rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #fff;
  }

  .shopping_shopCart0_0_c1 {
    font-size: 24rpx;
    color: var(--benbenFontColor1);
    margin: 0rpx 0rpx 40rpx 0rpx;
  }

  .shopping_shopCart0_0_c0 {
    width: 456rpx;
    height: 228rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .shopping_shopCart0_0 {
    padding: 0rpx 0rpx 24rpx 0rpx;
  }

  .shopping_flex_cart_1 {
    --shop-icon-color: var(--benbenFontColor5);
    --nav-btn-bg: var(--benbenbgColor7);
    --checked-active: #ff0000;
    --del-btn-color: #ffffff;
    --del-btn-bg: var(--benbenbgColor7);
    --submit-btn-bg: var(--benbenbgColor7);
  }

  .shopping_flex_specs_3 {
    --active-sku-tag-color: var(--benbenFontColor3);
    --active-sku-tag-bg: var(--benbenbgColor7);
    --sku-tag-color: #33333;
    --sku-tag-bg: #f5f5f5;
    --buy-btn-bg: var(--benbenbgColor2);
    --cart-btn-bg: var(--benbenbgColor7);
    --confirm-btn-bg: var(--benbenbgColor7);
  }

  .shopping_flex_4 {
    // padding: 0rpx 24rpx 0rpx 24rpx;
    position: fixed;
    // #ifdef H5
    bottom: 90rpx;
    // #endif
    // #ifdef APP
    bottom: 0rpx;
    // #endif
    left: 0;
    width: 100%;
    padding: 16rpx;
    background-color: #FFFFFF;
  }

  .shopping_fd4_0 {
    height: 43px;
  }

  .btns {
    width: 300rpx;
    margin-top: 10rpx;

    .btnsone {
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 44rpx;
      text-align: center;
      background: #f8f8f8;
      padding: 0 16rpx;
      min-width: 110rpx;
    }
  }
</style>
